import 'package:flutter/material.dart';
import '../Model/post.dart';

class BasicViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      // pageSnapping: false,
      // reverse: true,
      scrollDirection: Axis.horizontal,
      onPageChanged: (currentPage)=> debugPrint('page is : $currentPage'),
      controller: PageController(
        initialPage: 1,
        keepPage: true,
      ),
      children:[
        GridViewBuildDemo(),
        GridViewExtendDemo(),
        PageViewBuilderDemo(),
        PageViewDemo()
      ]
    );
  }
}

class GridViewBuildDemo extends StatelessWidget {
  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
      child: Image.network(posts[index].imageUrl,fit: BoxFit.cover,)
    );
  }
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      itemCount: posts.length,
      itemBuilder: _gridItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0
      ),
    );
  }
}

class GridViewExtendDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        alignment: Alignment(0,0),
        color: Colors.grey[350],
        child: Text('item')
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      // scrollDirection: Axis.horizontal,
      maxCrossAxisExtent: 100,
      children: _buildTitles(30),
    );
  }
}

class GridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        alignment: Alignment(0,0),
        color: Colors.grey[350],
        child: Text('item')
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      scrollDirection: Axis.horizontal,
      children: _buildTitles(30),
    );
  }
}

class PageViewBuilderDemo extends StatelessWidget {
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack ( 
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover
          ),
        ),
        Positioned(
          left: 8.0,
          bottom: 8.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(posts[index].title, style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold,fontSize: 16)),
              Text(posts[index].author, style: TextStyle(color: Colors.black54, fontWeight: FontWeight.normal,fontSize: 14)),
            ],
          )
        )
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      scrollDirection: Axis.vertical,
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      // pageSnapping: false,
      // reverse: true,
      scrollDirection: Axis.vertical,
      onPageChanged: (currentPage)=> debugPrint('page is : $currentPage'),
      controller: PageController(
        initialPage: 1,
        keepPage: false,
        viewportFraction: 0.8
      ),
      children: [
        Container(
          color: Colors.red,
          alignment: Alignment(0.0,0.0),
          child: Text('ONE', style: TextStyle(color: Colors.white, fontSize: 20)),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment(0.0,0.0),
          child: Text('TWO', style: TextStyle(color: Colors.white, fontSize: 20)),
        ),
        Container(
          color: Colors.yellow,
          alignment: Alignment(0.0,0.0),
          child: Text('Three', style: TextStyle(color: Colors.white, fontSize: 20)),
        ),
      ],
    );
  }
}